.header {
  width: 100%;
  height: 75px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  box-shadow: 0px 0px 10px -5px #6f6e6e;
  z-index: 10;
  background-color: white;
<<<<<<< HEAD

    .centername {
            width: 600px;
            height: 50px;
            margin: 0 auto;
            border-radius: 10px;
            border: 1px solid blue;
            transition: 1s;
            margin-top: 10px;
            .btn {
                border-radius: 0 10px 10px 0;
            }
        }
        .centername1{
          transition: 1s;
              opacity: 0;
              // display: none;
        }
  >div {
    width: 50%;
    height: 100%;
  }

=======
  > div {
    width: 50%;
    height: 100%;
  }
>>>>>>> 040b22f (改版)
  .header_left {
    display: flex;
    align-items: center;
    justify-content: space-between;
<<<<<<< HEAD

=======
>>>>>>> 040b22f (改版)
    .logo {
      width: 170px;
      height: 40px;
      margin-left: 30px;
<<<<<<< HEAD

=======
>>>>>>> 040b22f (改版)
      img {
        width: 100%;
        height: 100%;
      }
    }
<<<<<<< HEAD

=======
>>>>>>> 040b22f (改版)
    .header_tab {
      width: 600px;
      height: 100%;
      margin-right: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
<<<<<<< HEAD

=======
>>>>>>> 040b22f (改版)
      .header_tab_item {
        width: 100%;
        height: 100%;
        display: flex;
<<<<<<< HEAD
        -content: space-around;
        align-items: center;
        position: relative;
        font-size: 18px;

=======
        justify-content: space-around;
        align-items: center;
        position: relative;
        font-size: 18px;
>>>>>>> 040b22f (改版)
        .tiphot {
          width: 30px;
          height: 15px;
          position: absolute;
          right: 0px;
          top: 7px;
<<<<<<< HEAD

=======
>>>>>>> 040b22f (改版)
          img {
            width: 100%;
            height: 100%;
          }
        }
<<<<<<< HEAD

=======
>>>>>>> 040b22f (改版)
        .vip_corner_2 {
          width: 70px;
          height: 20px;
          position: absolute;
          right: -10px;
          top: 8px;
<<<<<<< HEAD

=======
>>>>>>> 040b22f (改版)
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
<<<<<<< HEAD

      .header_tab_item:hover {
        color: #1261ff;
      }
    }
  }

=======
      .header_tab_item:hover > span {
        color: #1261ff;
      }
      .featcured_picks_popup {
        width: 100vw;
        height: 570px;
        background-color: white;
        box-shadow: 0px 0px 10px -5px #6f6e6e;
        position: absolute;
        left: -330px;
        top: 74px;
        z-index: 10;
        display: none;
        border-radius: 20px;
      }
      .word_bench_popup {
        width: 1250px;
        height: 550px;
        background-color: white;
        box-shadow: 0px 0px 10px -5px #6f6e6e;
        position: absolute;
        left: -100px;
        top: 74px;
        z-index: 10;
        border-radius: 20px;
        display: none;
      }
      .products_services_popup {
        width: 1550px;
        height: 750px;
        background-color: white;
        box-shadow: 0px 0px 10px -5px #6f6e6e;
        position: absolute;
        left: -330px;
        top: 74px;
        z-index: 10;
        border-radius: 20px;
        display: none;
      }
      .solution_popup {
        width: 790px;
        height: 465px;
        background-color: white;
        box-shadow: 0px 0px 10px -5px #6f6e6e;
        position: absolute;
        left: -290px;
        top: 74px;
        z-index: 10;
        border-radius: 20px;
        display: none;
      }
      .header_item_1:hover .featcured_picks_popup {
        display: block;
      }
      .header_item_2:hover .word_bench_popup {
        display: block;
      }
      .header_item_3:hover .products_services_popup {
        display: block;
      }
      .header_item_4:hover .solution_popup {
        display: block;
      }
    }
  }
>>>>>>> 040b22f (改版)
  .header_right {
    display: flex;
    justify-content: right;
    align-items: center;
    position: relative;
<<<<<<< HEAD

    .ant-btn {
      margin-right: 50px;
    }

=======
    .content_search {
      width: 100%;
      height: 55px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 10px;
      .search_select {
        width: 120px;
        height: 50px;
        .ant-select-selector {
          .ant-select-selection-item {
            font-weight: bold;
          }
        }
      }
      .search_input {
        width: 330px;
        height: 50px;
      }
      .ant-btn {
        width: 65px;
        height: 50px;
      }
    }
    .ant-btn {
      margin-right: 50px;
    }
>>>>>>> 040b22f (改版)
    .header_tip {
      width: 360px;
      height: 50px;
      position: absolute;
      top: 60px;
      right: 50px;
      animation-duration: 2s;
<<<<<<< HEAD
      animation-name: header_tip;
      animation-iteration-count: infinite;

=======
      z-index: 11;
      animation-name: header_tip;
      animation-iteration-count: infinite;
>>>>>>> 040b22f (改版)
      img {
        width: 100%;
        height: 100%;
      }
    }
<<<<<<< HEAD

    @keyframes header_tip {
      0% {
        margin-top: 0px;
      }

      50% {
        margin-top: 10px;
      }

      100% {
        margin-top: 0px;
      }
    }
  }
}

.divBG1 {
  background: gray;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 20;
  opacity: 0;
  // filter: alpha(opacity=60); 
  background-color: rgba(16, 14, 14, 0.2);
  transition: 1s;
  .tan {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    background-color: #fff;
    opacity: 1;
    z-index: 210;
    margin-top: 100px;
    border-radius: 20px;
  }
}

.divBG {
  background: gray;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  // display: none; 
  z-index: 20;
  // filter: alpha(opacity=60); 
  background-color: rgba(16, 14, 14, 0.2);
  transition: 0.5s;
  opacity: 1;
  // visibility: visible;
  
  .tan {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    background-color: #fff;
    opacity: 1;
    z-index: 210;
    margin-top: 100px;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
// transition: 10s;
    .tan_left {
      width: 30%;
      height: 100%;

      // background-color: aqua;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .tan_right {
      width: 70%;
      height: 100%;

      // background-color: red;
      .tanright_top {
        width: 100%;
        height: 80px;
        // background-color: aqua;
        display: flex;

        .phones {
          width: 100px;
          height: 50px;
          font-size: 16px;
          text-align: center;
          color: #1261ff;
          background-color: #f0f6ff;
          line-height: 50px;
          border-radius: 20px;
          cursor: pointer;
          margin-left: 500px;
          margin-top: 20px;
        }

        img {
          width: 100px;
          height: 100%;
          justify-content: flex-end;
          margin-left: auto;
          cursor: pointer;
        }
      }

      .tanright_center {
        width: 100%;
        height: 100px;
        // background-color: aqua;
        display: flex;

        .we_that {
          width: 250px;
          height: 50px;
          border: 1px solid #ccc;
          border-radius: 20px 0 0 20px;
          margin-top: 20px;
          margin-left: 100px;
          text-align: center;
          font-size: 20px;
          line-height: 50px;
          cursor: pointer;
          background-color: #1261ff;
          color: #fff;
        }

        .wes_that {
          width: 250px;
          height: 50px;
          border: 1px solid #ccc;
          border-radius: 20px 0 0 20px;
          margin-top: 20px;
          margin-left: 100px;
          text-align: center;
          font-size: 20px;
          line-height: 50px;
          cursor: pointer;
        }

        .xiu_that {
          width: 250px;
          height: 50px;
          border: 1px solid #ccc;
          border-radius: 0 20px 20px 0;
          margin-top: 20px;
          text-align: center;
          font-size: 20px;
          line-height: 50px;
          cursor: pointer;
        }

        .xius_that {
          width: 250px;
          height: 50px;
          border: 1px solid #ccc;
          border-radius: 0 20px 20px 0;
          margin-top: 20px;

          text-align: center;
          font-size: 20px;
          line-height: 50px;
          cursor: pointer;
          background-color: #1261ff;
          color: #fff;
        }

        .xiu_that:hover {
          background-color: #f5f7fa;
        }
      }

      .tanright_centertwo {
        width: 100%;
        height: 250px;
        .input_one{
          width: 300px;
          height: 50px;
        }
        // background-color: red;
        .we_thatlogin {
          width: 200px;
          height: 200px;
          // border: 1px solid #ccc;
          margin: 0 auto;
          text-align: center;
          font-size: 14px;
          color: #ccc;

          .images {
            width: 200px;
            height: 200px;
          }
        }

        .xiu_thatlogin {
          width: 200px;
          height: 200px;
          // border: 1px solid #ccc;
          margin: 0 auto;
          text-align: center;
          font-size: 14px;
          color: #ccc;

          .images {
            width: 200px;
            height: 200px;
          }
        }
      }

      .ps {
        text-align: center;
        width: 100%;
        color: #ccc;
        font-size: 16px;
      }

      .tanright_centerthree {
        width: 100%;
        margin: 0 auto;

        // display: flex;
        .tu_biao {
          width: 100%;
          height: 100px;
          font-size: 20px;
          display: flex;

          .images_one {
            margin: 0 auto;
            width: 40px;
            height: 40px;
            overflow: hidden;
          }

          .tu_piao {
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            background-color: #ccc;
            margin-left: 50px;
             cursor: pointer;
          }

          .pas {
            width: 60px;
            height: 50px;
            font-size: 14px;
          }
        }
      }
      .btn_buttom{
        width: 100%;
        height: 50px;
        display: flex;
        // background-color: aqua;
        .btn_left{
            width: 70%;
        height: 50px;
        border-right: 1px solid #ccc;
        font-size: 16px;
        text-align: center;
        }
        .btn_right{
          width: 29%;
        height: 50px;
        font-size: 16px;
        text-align: center;
        color: #1261ff;
        line-height: 40px;
         cursor: pointer;
        }
      }
    }
  }
}

.dings {
  cursor: pointer;
  position: fixed;
  top: 100px;
  right: 400px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  z-index: 210;
  background-color: red;
}

.dings:hover {
  color: #fff;
  background-color: black;
}

.dings1 {
  display: none;
}
.dingwei_one{
  width: 100px;
  height: 500px;
  background-color: #fff;
  position: fixed;
  right: 0;
  bottom: 100px;
  z-index: 222;
  .dingwei_img{
    width: 100%;
    height: 15%;
      cursor: pointer;
      text-align: center;
      position: relative;
      .kefu{
        width: 400px;
        height: 500px;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: -400px;
        border-radius: 20px;
        overflow: hidden;
        display: none;
        img{
          width: 100%;
          height: 100%;
        }
      }
    img{
      width: 100%;
      height: 100%;
    }
  }
  #kefu:hover{
    .kefu{
      display: block;
    }
  }
  .dingwei_img:hover{
    background-color: #ccc;

  }
}
=======
    @keyframes header_tip {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(10px);
      }
      100% {
        transform: translateY(0px);
      }
    }
  }
  .login_in {
    width: 220px;
    height: 100%;
    margin-right: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .work_bench_btn {
      width: 100px;
      height: 45px;
      font-weight: bold;
      margin-right: 10px;
    }
    .work_bench_btn:hover {
      background-color: #1261ff;
      color: white;
      transition: 0.1s;
    }
    .coupon_img_box {
      width: 60px;
      height: 60px;
      margin-right: 10px;
      position: relative;
      .coupon_img {
        width: 100%;
        height: 100%;
      }
      .coupon_img_popup {
        width: 430px;
        height: 300px;
        background-color: white;
        position: absolute;
        top: 65px;
        box-shadow: 0px 0px 10px -5px #6f6e6e;
        left: -320px;
        padding-left: 25px;
        border-radius: 10px;
        transform: scaleY(0);
        transform-origin: top;

        .username {
          font-weight: bold;
          margin-top: 30px;
        }
        .coupons {
          width: 375px;
          height: 100px;
          background-image: url("../../../image/home_page/header/coupons.png");
          background-size: 100% 100%;
          margin-top: 30px;
          position: relative;
          .coupons_card {
            width: 375px;
            height: 60px;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            line-height: 60px;
            font-size: 18px;
            color: white;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            span {
              font-size: 30px;
              color: #ffc651;
            }
          }
          .coupons_countdown {
            width: 375px;
            height: 40px;
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            color: #83807d;
            font-weight: bold;
            .coupons_countdown_inner {
              display: flex;
              span {
                color: #ff5b50;
                min-width: 35px;
                text-align: center;
              }
            }
          }
        }
        .upgrade {
          width: 375px;
          height: 45px;
          background: linear-gradient(to right, #ffe2b8, #ffb342);
          border-radius: 10px;
          text-align: center;
          line-height: 45px;
          color: #8a470d;
          font-weight: bold;
          margin-top: 20px;
        }
        .upgrade:hover {
          background: linear-gradient(to right, #fcf0de, #fbcd88);
        }
        .text {
          font-size: 16px;
          color: #6f6e6e;
          margin-top: 20px;
        }
      }
    }
    .coupon_img_box:hover {
      .coupon_img_popup {
        height: 300px;
        transition: 0.2s;
        transform: scaleY(1);
      }
    }
    .avatar_box {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      position: relative;
      .avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
      }
      .userinfo_popup {
        width: 400px;
        height: 0px;
        background-color: red;
        position: absolute;
        left: -350px;
        top: 50px;
        border-radius: 10px;
        transform: scaleY(0);
        transform-origin: top;
      }
    }
    .avatar_box:hover {
      .userinfo_popup {
        height: 725px;
        transition: 0.2s;
        transform: scaleY(1);
      }
    }
  }
}
>>>>>>> 040b22f (改版)
